<script setup>
import { ref, onMounted } from 'vue'
import { autoHover } from '@/utils/autoHover.js'
import * as echarts from 'echarts'

const chartRef = ref()
let Chart = {}

const data = [
    {
        name: 'OP1',
        value: 37
    },
    {
        name: 'OP2',
        value: 22
    },
    {
        name: 'OP3',
        value: 49
    },
    {
        name: 'OP4',
        value: 59
    },
    {
        name: 'OP5',
        value: 17
    },
    {
        name: 'OP6',
        value: 93
    },
    {
        name: 'OP7',
        value: 37
    }
]
let allData = []
let currentPage = 1
let totalPage = 0
let pageCapacity = 7
let animationTimerId = null

//加载数据
onMounted(() => {
    initChart()
    getData()
    screenAdapter()
    window.addEventListener('resize', screenAdapter)
})

//初始化图表
const initChart = () => {
    Chart = echarts.init(chartRef.value)
    const initOption = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.8)',
            borderColor: 'rgba(50,50,50,0)',
            formatter: formatterGX
        },
        grid: {
            right: 0,
            left: 30,
            bottom: 20,
            top: 20
        },
        legend: {
            left: 'right'
        },
        xAxis: {
            type: 'category',
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,
                color: 'rgba(255,255,255,.7)'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#56769C'
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: (value) => {
                return Math.ceil(value.max / 100) * 100
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,
                color: 'rgba(255,255,255,.7)'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#56769C' //刻度线的颜色
                }
            }
        },
        series: [
            {
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#28E2FF' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#2A2B2B' // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    }
                }
            }
        ]
    }
    Chart.setOption(initOption)

    //鼠标事件
    Chart.on('mouseover', () => {
        clearInterval(animationTimerId)
    })
    Chart.on('mouseout', () => {
        startInterval()
    })

    // 参数分别为：容器，配置，轮播数量，轮播间隔时间
    autoHover(Chart, 4, 3000)
}

//获取数据
const getData = () => {
    allData = data
    // 对allData进行从大到小的排序
    allData.sort((a, b) => {
        return a.name - b.name
    })
    totalPage =
        allData.length % pageCapacity === 0
            ? parseInt(allData.length / pageCapacity)
            : parseInt(allData.length / pageCapacity) + 1
    updateChart()
    startInterval()
}

//屏幕适配
const screenAdapter = () => {
    Chart.resize()
}

//动画函数
const startInterval = () => {
    if (animationTimerId) {
        clearInterval(animationTimerId)
    }
    animationTimerId = setInterval(() => {
        currentPage++
        if (currentPage > totalPage) {
            currentPage = 1
        }
        updateChart()
    }, 3000)
}

// 更新数据 显示图标
const updateChart = () => {
    const start = (currentPage - 1) * pageCapacity
    const end = currentPage * pageCapacity
    const showData = allData.slice(start, end)
    // 处理数据并且更新界面图表
    const names = showData.map((item) => {
        return item.name
    })
    const values = showData.map((item) => {
        return item.value
    })

    Chart.setOption({
        yAxis: {
            data: names
        },
        series: [
            {
                data: values
            }
        ]
    })
}

const formatterGX = (params) => {
    return `<div style="background-color:transparent;">
                <div style="font-size:18px;color:#fff;">${params[0].axisValue}</div>
                <div style="font-size:16px;color:#fff;margin:14px 0 8px 0">产能趋势</div>
                <div style="font-size:16px;color:#fff;"> <span style="font-size:24px;color:#FFEC5A;">${params[0].data}</span> 件</div>
            </div>`
}
</script>

<template>
    <div class="com-bottom-card">
        <div class="com-card-head">
            <h1>工序产量</h1>
        </div>
        <div class="com-chart-content chart" ref="chartRef"></div>
    </div>
</template>

<style scoped lang="scss">
.chart {
    height: 180px;
    width: 440px;
}
</style>
